<template>
  <div class="app-container">
    <h4>基本信息</h4>
    <div class="change">
      <p>
        <span>物品类别</span>
        <el-cascader
          :options="fenlei"
          v-model="tempData.parentId"
          :show-all-levels="false"
          class="userselect"
          :props="{ checkStrictly: true, value:'ids',label: 'names', children:'list' }"
          clearable></el-cascader>
      </p>
      <p>
        <span>选择仓库</span>
        <el-select v-model="tempData.cangk" :disabled="islook" placeholder="请选择仓库" class="userselect">
          <el-option
            v-for="item in cangku"
            :key="item.sid"
            :label="item.names"
            :value="item.names"
          ></el-option>
        </el-select>
      </p>
      <p>
        <span>物品编码</span>
        <el-input v-model="tempData.bianma" type="text" class="userselect" placeholder="请输入物品编码" />
      </p>
      <p>
        <span>物品名称</span>
        <el-input v-model="tempData.names" type="text" class="userselect" placeholder="请输入物品名称" />
      </p>
      <p>
        <span>商品条码</span>
        <el-input v-model="tempData.propertyNums" type="text" class="userselect" placeholder="请输入商品条码" />
      </p>
      <p>
        <span>单位</span>
        <el-input v-model="tempData.danwei" type="text" class="userselect" placeholder="请输入单位" />
      </p>
      <p>
        <span>数量</span>
        <el-input v-model="tempData.num" type="number" class="userselect" placeholder="请输入数量" />
      </p>

      <p>
        <span>单价</span>
        <el-input v-model="tempData.unitPrice" type="text" class="userselect" placeholder="请输入单价" />
      </p>

      <p>
        <span>安全库存上限</span>
        <el-input v-model="tempData.anquanUp" type="number" class="userselect" placeholder="请输入安全库存上限" />
      </p>

      <p>
        <span>安全库存下限</span>
        <el-input v-model="tempData.anquanDowm" type="number" class="userselect" placeholder="请输入安全库存下限" />
      </p>
      <p>
        <span>规格型号</span>
        <el-input v-model="tempData.guige" type="textarea" class="userselect" placeholder="请输入规格型号" />
      </p>
      <p>
        <span>备注</span>
        <el-input v-model="tempData.remarks" type="textarea" class="userselect" placeholder="请输入备注" />
      </p>

      <p>
        <span>图片</span>
        <el-upload
          class="avatar-uploader"
          action
          :http-request="designUpAvatar"
          :show-file-list="false"
          :disabled="active == 2"
        >
          <img v-if="tempData.imgurl" :src="tempData.imgurl" class="avatar1" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </p>
    </div>
    <div class="submits" v-if="!islook">
      <el-button type="primary" size="small" v-loading="isclick" @click="saveOrder">确认</el-button>
      <el-button type="default" size="small" @click="nosaveOrder">取消</el-button>
    </div>
  </div>
</template>
<script>
import { addHaocaiZichan,updateHaocaiZichan,uploadFile,selectHaocaiFenlei,getSeting } from "@/api/caigou";
let chejianId = null
export default {
  data() {
    return {
      radio: "1",
      total: 1,
      value: "",
      active: 0,
      tableData: [],
      tempData: {},
      fenlei: [],  //物品分类
      cangku: [],   //仓库分类
      fileNum: [
        {
          filename: "",
          filePath: "",
        },
      ], //需要上传的文件个数
      proData: [],
      writOradd: 0, //0新增，1编辑
      islook: false,
      isclick: false
    };
  },
  mounted() {
    if(this.$route.params.options){
      this.writOradd = 1
      this.tempData = JSON.parse(this.$route.params.options)
    }else{
      this.writOradd = 0
    }
    this.getClassify()
    this.getSet()
  },
  methods: {
    //	新增入库
    saveOrder() {
      console.log(this.tempData);
      if(Array.isArray(this.tempData.parentId)){
        this.tempData.parentId = this.tempData.parentId[this.tempData.parentId.length-1]
      }
      this.isclick = true
      if(this.writOradd === 0){
        this.tempData.status = '正常'
        addHaocaiZichan(this.tempData).then((res) => {
          console.log(res);
          this.$message({
            message: res.message,
            type: "success",
          });
          this.$router.go(-1);
          this.isclick = false
        });
      }else{
        updateHaocaiZichan(this.tempData).then((res) => {
          console.log("-------------------");
          console.log(res);
          this.$message({
            message: res.message,
            type: "success",
          });
          this.$router.go(-1);
          this.isclick = false
        });
      }
    },
    getSet(){
      getSeting({}).then(res => {
        this.cangku = res.data.filter(item => item.status === '3')
      })
    },
    downLoad(filepath) {
      window.location.href = filepath;
    },
    /**
     * 获取分类
     */
    getClassify(){
      selectHaocaiFenlei({}).then(res => {
        console.log(res)
        this.fenlei = res.data
        this.threeloading = false
      })
    },
    designUpAvatar(item) {
      console.log(this.fileNum);
      var formData = new FormData();
      const loading = this.$loading({
        lock: true,
        text: "上传中请稍等...",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.8)",
      });
      formData.append("file", item.file);
      uploadFile(formData).then((res) => {
        console.log(res);
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success",
        });
        loading.close();
        this.imageUrl = res;
        this.tempData.imgurl = res;
        this.$forceUpdate()
        console.log(this.tempData.imgurl);
      });
    },
    goPrev(page) {
      console.log(page);
    },
    goNext(page) {
      console.log(page);
    },
    // 删除对应商品数据
    deleteRow(value, index) {
      console.log(index);
      this.proData.splice(index, 1);
    },
    // 取消新增
    nosaveOrder() {
      console.log("取消");
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.popup {
  padding: 0 20px;
}
.product {
  display: flex;
  .pro-l {
    width: 200px;
  }
  .pro-r {
    flex: 1;
    overflow: hidden;
    /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: rgba(24, 160, 94, 0.2);
    }
    /deep/.el-table tr {
      cursor: pointer;
    }
    /deep/.el-table__body tr.current-row > td {
      background-color: rgba(24, 160, 94, 0.4);
    }
  }
}
.files {
  display: flex;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 20px;
  overflow: hidden;
  padding: 20px;
}
.files-btm .btn-prev:after {
  content: "上一页";
}
.files-btm .btn-next:before {
  content: "下一页";
}
.files-btm .btn-prev,
.files-btm .btn-next {
  width: 65px;
}
.files-left {
	width: 160px;
	margin-right: 20px;
  height: 420px;
  overflow-y: auto;
  /*滚动条样式*/
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.01);
  }
	/deep/.el-menu{
		border-right: none;
	}
	/deep/.el-menu-item{
		height: 35px;
		line-height: 35px;
		margin-bottom: 8px;
	}
	/deep/.el-menu-item.is-active{
		color: #fff;
		border-radius: 5px;
		background: rgba(24,160,94,.8);
	}
}
.files-right {
  flex: 1;
  overflow: hidden;
}
.files-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  // margin-top: 20px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 45px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.avatar {
  width: 30px;
  height: 30px;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.inps {
  width: 95%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.8);
}
.inps-active {
  width: 95%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: rgba(24, 160, 94, 0.2);
  border: none;
  color: rgba(0, 0, 0, 0.8);
}
h4 {
  background: #fff;
  padding-top: 12px;
  padding-bottom: 12px;
  margin: 0;
  padding-left: 10px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #ccc;
}
.change {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 0 0 8px 8px;
  padding: 20px;
  margin-bottom: 20px;
  > p {
    width: 25%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      background: none;
      height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.submits {
  display: flex;
  padding: 15px 20px;
  justify-content: flex-end;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  > div {
    width: 80px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    margin-left: 30px;
    cursor: pointer;
  }
  .save {
    background: #2196f3;
  }
  .nosave {
    background: #999;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #999 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ccc;
}
.avatar1 {
  width: 100px;
  height: 100px;
  display: block;
}

.fileup {
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 0 0 8px 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-direction: column;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      // width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    /deep/.el-upload-dragger {
      width: 100%;
      height: 100px;
    }
    /deep/.el-upload-dragger .el-icon-upload {
      font-size: 60px;
      color: #c0c4cc;
      margin: 0;
      line-height: 1;
      width: 100%;
    }
    /deep/.el-upload {
      width: 100%;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: inline-block;
      width: 100px;
      text-align: right;
      padding-right: 15px;
      &:last-child {
        text-align: left;
      }
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
    > strong {
      display: inline-block;
      padding-right: 100px;
      font-weight: 100;
      font-size: 14px;
      &:last-child {
        cursor: pointer;
        color: #13ce66;
        font-weight: 600;
      }
    }
    > div {
      width: inherit;
      flex: 1;
    }
  }
}
@media screen and (max-width: 1400px) {
  .change > p {
    width: 33%;
  }
}
</style>